<template>
  <div class="login">
    <el-dialog v-model="userStore.visiable" title="用户登录" @close="close">
      <!-- 对话框的身体 -->
      <el-row>
        <!-- 登录 验证码 扫码 -->
        <el-col :span="12">
          <div class="login_form">
            <!-- 验证码登录 -->
            <div v-show="scene == 0" class="code">
              <el-form :model="loginParam" :rules="rules" ref="form">
                <el-form-item prop="phone">
                  <el-input
                    placeholder="请您输入手机号码"
                    :prefix-icon="User"
                    v-model="loginParam.phone"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="code">
                  <el-input
                    placeholder="请您输入手机验证码"
                    :prefix-icon="Lock"
                    :disabled="!isPhone"
                    v-model="loginParam.code"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button :disabled="!isPhone || flag">
                    <CountDown v-if="flag" :flag="flag" @getFlag="getFlag" />
                    <span v-else @click="getCode">获取验证码</span>
                  </el-button>
                </el-form-item>
                <el-form-item>
                  <el-button
                    style="width: 100%; margin: 0 auto"
                    type="primary"
                    :disabled="!isPhone || loginParam.code.length < 6"
                    @click="login"
                  >
                    用户登录
                  </el-button>
                </el-form-item>
              </el-form>
              <div class="changMode">
                微信扫码登录
                <svg
                  t="1695884234402"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1532"
                  width="32"
                  height="32"
                  @click="changeScene"
                >
                  <path
                    d="M1010.8 628c0-141.2-141.3-256.2-299.9-256.2-168 0-300.3 115.1-300.3 256.2 0 141.4 132.3 256.2 300.3 256.2 35.2 0 70.7-8.9 106-17.7l96.8 53-26.6-88.2c70.9-53.2 123.7-123.7 123.7-203.3zM618 588.8c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40c0 22-17.9 40-40 40z m194.3-0.3c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40z"
                    fill="#00C800"
                    p-id="1533"
                  ></path>
                  <path
                    d="M366.3 106.9c-194.1 0-353.1 132.3-353.1 300.3 0 97 52.9 176.6 141.3 238.4l-35.3 106.2 123.4-61.9c44.2 8.7 79.6 17.7 123.7 17.7 11.1 0 22.1-0.5 33-1.4-6.9-23.6-10.9-48.3-10.9-74 0-154.3 132.5-279.5 300.2-279.5 11.5 0 22.8 0.8 34 2.1C692 212.6 539.9 106.9 366.3 106.9zM247.7 349.2c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z m246.6 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z"
                    fill="#00C800"
                    p-id="1534"
                  ></path>
                </svg>
              </div>
            </div>
            <!-- 二维码登录 -->
            <div v-show="scene == 1" class="wechat">
              <!-- 显示微信扫码登录得页面 -->
              <div id="login_container"></div>
              <div class="changMode">
                手机验证码登录
                <svg
                  t="1695885866020"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4566"
                  width="32"
                  height="32"
                  @click="scene = 0"
                >
                  <path
                    d="M512 884.053333c-40.96 0-75.093333-34.133333-75.093333-75.093333s34.133333-75.093333 75.093333-75.093333 75.093333 34.133333 75.093333 75.093333S552.96 884.053333 512 884.053333zM512 771.413333c-20.48 0-37.546667 17.066667-37.546667 37.546667s17.066667 37.546667 37.546667 37.546667c20.48 0 37.546667-17.066667 37.546667-37.546667S532.48 771.413333 512 771.413333z"
                    fill="#FF9000"
                    p-id="4567"
                  ></path>
                  <path
                    d="M679.253333 993.28c-3.413333 0-6.826667 0-10.24-3.413333-40.96-23.893333-109.226667-23.893333-109.226667-23.893333l0 0L276.48 965.973333c-54.613333 0-98.986667-44.373333-98.986667-98.986667L177.493333 139.946667c0-54.613333 44.373333-98.986667 98.986667-98.986667l471.04 0c54.613333 0 98.986667 44.373333 98.986667 98.986667l0 727.04c0 54.613333-44.373333 98.986667-98.986667 98.986667-10.24 0-17.066667-6.826667-17.066667-17.066667s6.826667-17.066667 17.066667-17.066667c34.133333 0 61.44-27.306667 61.44-61.44L808.96 139.946667c0-34.133333-27.306667-61.44-61.44-61.44L276.48 78.506667c-34.133333 0-61.44 27.306667-61.44 61.44l0 727.04c0 34.133333 27.306667 61.44 61.44 61.44l283.306667 0c3.413333 0 78.506667 0 126.293333 30.72 10.24 6.826667 10.24 17.066667 6.826667 23.893333C692.906667 989.866667 686.08 993.28 679.253333 993.28z"
                    fill="#FF9000"
                    p-id="4568"
                  ></path>
                  <path
                    d="M590.506667 150.186667l-153.6 0c-10.24 0-17.066667-6.826667-17.066667-17.066667s6.826667-17.066667 17.066667-17.066667l153.6 0c10.24 0 17.066667 6.826667 17.066667 17.066667C607.573333 139.946667 600.746667 150.186667 590.506667 150.186667z"
                    fill="#FF9000"
                    p-id="4569"
                  ></path>
                </svg>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">456</el-col>
      </el-row>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="userStore.visiable = false"> 关闭窗口 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
// 引入wx扫码登录参数请求
import { reqWxLogin } from "@/api/hospital/index";
import { ElMessage } from "element-plus";
import { ref, reactive, computed, watch } from "vue";
import CountDown from "@/components/countdown/index.vue";
import { User, Lock } from "@element-plus/icons-vue";
import type { WXLoginResponseData } from "@/api/hospital/type";
import { useRoute, useRouter } from "vue-router";
// 获取仓库中的数据，控制login组件的对话框的显示隐藏
import useUserStore from "@/store/modules/user";
let $route = useRoute();
let $router = useRouter();
let userStore = useUserStore();
let scene = ref<number>(0); //验证码0 二维码1 切换
// 手机表单数据
let loginParam = reactive({
  phone: "",
  code: "",
});
// 验证码倒计时
let flag = ref<boolean>(false); //false 不显示倒计时 true进行倒计时
// 获取form组件
let form = ref<any>();
// 计算手机号码是否正确
let isPhone = computed(() => {
  const reg =
    /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/;
  return reg.test(loginParam.phone);
});
// 获取手机验证码
const getCode = async () => {
  // 解决elementplus按钮禁用以后还能点击
  if (!isPhone.value || flag.value) return;
  flag.value = true; //显示倒计时
  // 通知pinia仓库存储验证码
  try {
    await userStore.getCode(loginParam.phone);
    loginParam.code = userStore.code;
  } catch (error) {
    ElMessage({
      message: (<Error>error).message,
      type: "error",
    });
  }
};
// 接收倒计时组件传过来的参数
const getFlag = (value: boolean) => {
  flag.value = value;
};
// 点击用户登录回调
const login = async () => {
  // 保证表单校验两项都符合条件
  await form.value.validate();
  // 发起登录请求
  // 登录成功，顶部展示用户名称，登录对话框关闭
  // 登录失败，弹出对应登录失败的错误信息
  try {
    // 用户登录成功
    await userStore.userLogin(loginParam);
    // 关闭对话框
    userStore.visiable = false;
    // 获取url参数
    let redirect = $route.query.redirect;
    if (redirect) {
      $router.push(redirect as string);
    } else {
      $router.push("/home");
    }
  } catch (error) {
    ElMessage({
      type: "error",
      message: (error as Error).message,
    });
  }
};

// 手机号发自定义校验规则
// @ts-ignore
const validatorPhone = (rule: any, value: any, callback: any) => {
  const reg =
    /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/;
  if (reg.test(value)) {
    callback();
  } else {
    callback(new Error("请输入正确的手机号码"));
  }
};
// @ts-ignore
const validatorCode = (rule: any, value: any, callback: any) => {
  if (/^\d{6}$/.test(value)) {
    callback();
  } else {
    callback(new Error("请输入正确的验证码"));
  }
};
// 表单校验对象
const rules = {
  // phone: [
  //   { required: true, message: "手机号务必11位", trigger: "change", min: 11 },
  // ],
  // code: [{ required: true, message: "验证码务必6位", trigger: "blur", min: 6 }],
  phone: [{ validator: validatorPhone, trigger: "change" }],
  code: [{ validator: validatorCode, trigger: "change" }],
};
// 对话框关闭事件
const close = () => {
  form.value.resetFields();
};
// 切换登录方式 短信切换成二维码
const changeScene = async () => {
  scene.value = 1;
  // 发请求获取微信扫码二维码得参数
  // 需要携带一个参数，告诉服务器用户授权成功以后重定向项目某一个页面
  let redirect_URL = encodeURIComponent(window.location.origin + "/wxlogin");
  let result: WXLoginResponseData = await reqWxLogin(redirect_URL);

  // 生成微信扫码二维码
  // @ts-ignore
  new WxLogin({
    self_redirect: true, //true:手机点击确认登录后可以在 iframe 内跳转到 redirect_uri
    id: "login_container", //显示二维码容器设置
    appid: result.data.appid, //应用位置标识appid
    scope: "snsapi_login", //当前微信扫码登录页面已经授权了
    redirect_uri: result.data.redirectUri, //填写授权回调域路径,就是用户授权成功以后，微信服务器向公司后台推送code地址
    state: result.data.state, //state就是学校服务器重定向的地址携带用户信息
    style: "black",
    href: "",
  });
};
// 监听场景得数值
watch(
  () => scene.value,
  (val: number) => {
    if (val === 1) {
      userStore.queryState();
    }
  }
);
</script>
<script lang="ts">
export default {
  name: "Login",
};
</script>
<style scoped lang="scss">
.login {
  ::v-deep(.el-dialog__body) {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }
  .login_form {
    border: 1px solid #eee;
    padding: 10px;
  }
  .changMode {
    // border: 1px solid red;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #7f7f77;
    svg {
      margin-top: 10px;
      cursor: pointer;
    }
  }
}
</style>
